import React, { useState, useEffect } from "react";
import { useParams, Link } from "react-router-dom";
import { Button, Popconfirm, Table, message, Input, Space, Tag } from "antd";
import { SettingOutlined, ArrowLeftOutlined } from "@ant-design/icons"; // 导入ArrowLeftOutlined图标

import { instance } from "../../utils/request";
import state from "../../store/num/reducer";
function SettingsComponent() {
  let { type_code } = useParams();
  const [dataSource, setDataSource] = useState([]);
  const [pagesize, setPageSize] = useState(10);
  const [pagenum, setPageNum] = useState(1);
  const [total, setTotal] = useState(0);

  const columns = [
    {
      title: "字典标签",
      dataIndex: "data_name",
      key: "data_name",
    },
    {
      title: "字典值",
      dataIndex: "data_code",
      key: "data_code",
    },
    {
      title: "字典类型",
      dataIndex: "type_code",
      key: "type_code",
    },
    {
      title: "创建时间",
      dataIndex: "create_time",
      key: "create_time",
    },
    {
      title: "字典状态",
      dataIndex: "status",
      key: "status",
      render: (status: any) => (
        <Tag color={status === "0" ? "green" : "red"}>
          {status === "0" ? "正常" : "禁用"}
        </Tag>
      ),
    },
    {
      title: "创建人",
      dataIndex: "create_by",
      key: "create_by",
    },
    {
      title: "操作",
      key: "action",
      render: (record: any) => (
        <>
          <Button
            onClick={() => {
              handleEdit(record);
            }}
            style={{ marginRight: "10px" }}
          >
            编辑
          </Button>
          <Popconfirm
            okText="确认"
            cancelText="取消"
            title="你确认要删除该记录嘛?"
            onConfirm={() => {
              handleDelete(record.id);
            }}
          >
            <Button type="primary">删除</Button>
          </Popconfirm>
        </>
      ),
    },
  ];

  const handleEdit = (record) => {
    // 编辑操作
  };

  const handleDelete = (id) => {
    // 删除操作
  };

  const changePage = (page: Number, pageSize: Number) => {
    console.log("page changed", page, pageSize);
    // setPageNum(page); // 更新页码
    // fetchData(page, pageSize); // 请求新数据
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const params = {
          typeCode: type_code,
        };
        const response = await instance.get("ddata/dictCode", { params });
        // console.log('res 结果',response.data.data)
        setDataSource(response.data.data);
      } catch (error) {
        // 处理错误
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, [type_code]); // 当 type_code 发生变化时重新请求数据

  return (
    <div>
      <Link to="/dict_types"> {/* Link组件 */}
        <Button type="primary">
          {" "}
          {/* 返回按钮 */}
          <ArrowLeftOutlined /> 返回
        </Button>
      </Link>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey="goods_id"
        pagination={{
          pageSize: pagesize,
          defaultCurrent: pagenum,
          onChange: changePage,
          total: total,
        }}
      />

    </div>
  );
}

export default SettingsComponent;
